import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/home/custom_test_dialog.dart';
import 'word/list.dart';
import 'exam/exam_page.dart';
class HomePage extends StatelessWidget {
  const HomePage({super.key});
  static const mainColor = Color.fromRGBO(77, 127, 234, 1);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: SafeArea(
          child: Column(children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Material(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.circular(14),
                    child: InkWell(
                      borderRadius: BorderRadius.circular(14),
                      onTap: () {},
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(14),
                          border: Border.all(
                            color: Colors.grey.withAlpha(77),
                            width: 1.0,
                          ),
                        ),
                        padding: const EdgeInsets.all(8.0),
                        child: const Icon(Icons.menu),
                      ),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Welcome!',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 14,
                        ),
                      ),
                      const Text(
                        '学渣英语',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              // 头像
              Container(
                width: 50, // 设置容器宽度
                height: 50, // 设置容器高度
                decoration: BoxDecoration(
                  color: Colors.white, // 背景色
                  borderRadius: BorderRadius.circular(12), // 圆角大小
                  border: Border.all(
                    // 可选：添加边框
                    color: Colors.grey.withAlpha(26), // 0.1 * 255 ≈ 26
                    width: 0,
                  ),
                  /*
                        boxShadow: [  // 可选：添加阴影
                          BoxShadow(
                            color: Colors.black.withAlpha(13),  // 0.05 * 255 ≈ 13
                            blurRadius: 10,
                            offset: const Offset(0, 2),
                          ),
                        ],
                        */
                ),
                child: SvgPicture.asset(
                  'assets/images/avatar.svg',
                  width: 24, // SVG 图标大小
                  height: 24,
                ),
              )
            ],
          ),
        ),
        Expanded(
            child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 顶部导航栏

                const SizedBox(height: 40),

                // 主卡片
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(24),
                  decoration: BoxDecoration(
                    color: Colors.grey[100],
                    borderRadius: BorderRadius.circular(24),
                  ),
                  child: Stack(
                    clipBehavior: Clip.none, // 允许子组件超出边界
                    children: [
                      // 左侧文字和按钮
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Text(
                            '单词记忆\n阅读文章',
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              height: 1.2,
                            ),
                          ),
                          const SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () {
                               Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => const WordPage(),  // 跳转到词汇页面
                                ),
                              );
                            },
                            style: ElevatedButton.styleFrom(
                              backgroundColor: mainColor,
                              foregroundColor: Colors.white,
                              padding: const EdgeInsets.symmetric(
                                horizontal: 24,
                                vertical: 12,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                            ),
                            child: const Text('立即开始'),
                          ),
                        ],
                      ),
                      // 右侧动画
                      Positioned(
                        right: -40,
                        bottom: -36,
                        child: Lottie.asset(
                          'assets/lottie/study_english.json',
                          height: 240, // 调整大小以适应布局
                          fit: BoxFit.contain,
                          onWarning: (warning) {
                            // 不做任何处理，即忽略警告
                          },
                        ),
                      ),
                    ],
                  ),
                ),

                const SizedBox(height: 20),

                // 搜索框
                Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Color.fromARGB(255, 239, 242, 249),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.search,
                        color: mainColor,
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            hintText: 'Search',
                            hintStyle: TextStyle(color: Colors.grey[400]),
                            border: InputBorder.none,
                            isDense: true,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 20),

                //题库
                CourseList(),
                SetTestWidget()
              ],
            ),
          ),
        ))
      ])),
    );
  }
}

class Course {
  // 课程名称
  final String name;
  // 取得的星星
  final int stars;
  // 总题库数
  final int allNum;
  // 已做题数
  final int doneNum;

  Course({
    required this.name,
    required this.stars,
    required this.allNum,
    required this.doneNum,
  });
}

class CourseList extends StatefulWidget {
  const CourseList({super.key});

  @override
  State<CourseList> createState() => _CourseListState();
}

class _CourseListState extends State<CourseList> {
  // 课程列表数据
  final List<Course> courses = [
    Course(name: '单项选择', stars: 2, allNum: 8054, doneNum: 100),
    Course(name: '阅读理解', stars: 2, allNum: 8054, doneNum: 100),
    Course(name: '完形填空', stars: 2, allNum: 8054, doneNum: 100),
    Course(name: '单句翻译', stars: 2, allNum: 8054, doneNum: 100),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: courses.length,
      separatorBuilder: (context, index) => const SizedBox(height: 10),
      itemBuilder: (context, index) {
        final course = courses[index];
        return Material(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
          child: InkWell(
            borderRadius: BorderRadius.circular(8),                
            
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ExamPage(),
                ),
              );
            },
            child: Container(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          course.name,
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Row(
                          children: [
                            ...List.generate(5, (index) {
                              return Icon(
                                index < course.stars
                                    ? Icons.star
                                    : Icons.star_border,
                                color: Color.fromRGBO(255, 97, 72, 1),
                                size: 16,
                              );
                            }),
                            const SizedBox(width: 8),
                            Text(
                              course.doneNum.toString(),
                              style: TextStyle(
                                color: Colors.grey[500],
                                fontSize: 12,
                              ),
                            ),
                            Text(
                              '/',
                              style: TextStyle(
                                color: Colors.grey[500],
                                fontSize: 12,
                              ),
                            ),
                            Text(
                              course.allNum.toString(),
                              style: TextStyle(
                                color: Colors.grey[500],
                                fontSize: 12,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward_ios,
                    color: HomePage.mainColor,
                    size: 16,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class SetTestWidget extends StatelessWidget {  // 注意类名首字母大写
  const SetTestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.grey[100],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Material(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(12),
          child: InkWell(
            borderRadius: BorderRadius.circular(12),
            onTap: () {
               CustomTestDialog.show(context);
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Row(
                children: [
                  Icon(
                    Icons.settings,
                    color: Colors.grey[600],
                    size: 20,
                  ),
                  const SizedBox(width: 12),
                  const Expanded(
                    child: Text(
                      '自定义刷题数量',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Color.fromARGB(255, 66, 66, 66),
                      ),
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.grey[400],
                    size: 14,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}